﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LayuiCMSluyun</title>
    <link href="../../../plugins/layui/css/layui.css" rel="stylesheet" media="all" />
</head>

<body>
    <script src="../../../plugins/layui/layui.js"></script>
    <script>

        //config的设置是全局的
        layui.config({
            base: 'js/' //假设这是你存放拓展模块的根目录
        })
        /*
        .extend({ //设定模块别名
        mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
        , mod1: 'admin/mod1' //相对于上述 base 目录的子目录
        });*/

        var layuiModel = ['jquery', 'echarts'];
        layui.use(layuiModel, function () {
            var $ = layui.jquery;
            var echarts = layui.echarts.init($('#main')[0]);

            var option = {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            echarts.setOption(option);
        });
    </script>
    <div id="main" style="height:500px"></div>
</body>

</html>